<template>
	<div class="address-list">
		<div class="header">收货地址管理</div>
		<div class="address-item" v-for="(address, index) in addressList" :key="index">
			<view class="left_content">
				<div class="recipient detail">{{ address.recipient_name }}</div>
				<div class="phone detail">{{ address.phone_number }}</div>
				<div class="location detail">{{ address.province }} {{ address.city }} {{ address.district }}</div>
				<div class="detail detail">{{ address.street_or_detail }}</div>
				<div class="street detail">{{ address.street }}</div>
			</view>
			<div class="actions">
				<button  type="warn" class="mini-btn" size="mini" v-show="address.is_default">默认</button>
				<button  type="primary" class="mini-btn" size="mini" @click="editAddress(address.id)">编辑</button>
				<button type="warn" class="mini-btn" size="mini" @click="deleteAddress(address.address_id)">删除</button>
			</div>
		</div>
		<div class="add-address-button">
			<button @click="addAddress">新增收货地址</button>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				addressList: [] // 收货地址列表，您可以从后端接口获取数据并填充到此数组中
			};
		},
		created() {
			this.getAddressList()
		},
		methods: {
			async getAddressList() {
				var data = {}
				var response = await this.$http.getAddressList(data)
				if (response.code == 1) {
					this.addressList = response.data
				}
			},
			addAddress() {
				// 跳转到添加地址页面
				uni.navigateTo({
					url: '/pages/address/add'
				});
			},
			editAddress(index) {
				// 跳转到编辑地址页面，传递地址信息参数
				uni.navigateTo({
					url: '/pages/edit-address?address=' + JSON.stringify(this.addressList[index])
				});
			},
			async deleteAddress(address_id) {
				var data = {}
				data.address_id = address_id
				var response = await this.$http.removeAddressItem(data)
				if (response.code == 1) {
					const index = this.addressList.findIndex((address) => address.address_id === address_id);
					if (index !== -1) {
						this.addressList.splice(index, 1);
					}
				}
			},
		}
	};
</script>

<style>
	/* 样式可以根据您的需求进行自定义 */
	.address-list {
		padding: 20px;
	}

	.header {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.address-item {
		border: 1px solid #ccc;
		padding: 10px;
		margin-bottom: 10px;
		height: 100px;
	}
	
	.detail{
		/* border: 1px solid red; */
		margin-top: 5px;
	}

	.recipient {
		font-weight: bold;
	}

	.phone {
		
	}

	.location,.street{
		color: #888;
		font-size: 12px;
	}

	.detail {
	}

	.left_content{
		/* border: 1px solid red; */
		width: 50%;
		float: left;
	}

	button {
		margin-right: 5px;
		padding: 5px 10px;
		
	}
	.mini-btn{
		/* border: 1px solid red; */
		float: right;
		height: 20px;
		line-height: 12px;
		font-size: 12px;
	}
</style>